<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>18.16 自定义指令 基础2 配置传参以及修饰符 </title>

	<style>
		input[type="text"] {
			height: 30px;
			width: 300px;
			margin-bottom: 10px;
			border-radius: 5px;
			padding: 2px;
			font-size: 16px;
			/* background-color: yellow; */

		}

		div {
			margin-top: 10px;
			margin-bottom: 10px;
		}


		button:hover {
			cursor: pointer;
		}

		input {
			height: 36px;

		}

		pre {
			background-color: beige;
			display: inline-block;
		}

		.card {
			width: 200px;
			padding: 10px;
			margin: 5px;
			background-color: #eee;
		}
	</style>

</head>
<!-- 
	官方文档 
	fitler 过滤器
	https://cn.vuejs.org/v2/guide/filters.html

	directive 指令
	https://cn.vuejs.org/v2/guide/custom-directive.html
 -->

<body>


	<div id="app">


		<div class="card" v-pin:warning.bottom.left="card1.pinned">
			<button @click="on_click_card1">顶住/取消</button>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore obcaecati sequi distinctio mollitia vitae
			quos culpa repellat tenetur dolorum. At neque itaque soluta unde laboriosam iste, harum corrupti enim!
			Debitis.

		</div>


		<div> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem itaque unde quos tenetur. Nulla
			iure ipsum, quaerat numquam veritatis doloribus molestiae molestias quod quas harum optio, dolores culpa
			odio odit!</div>
		<div> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem itaque unde quos tenetur. Nulla
			iure ipsum, quaerat numquam veritatis doloribus molestiae molestias quod quas harum optio, dolores culpa
			odio odit!</div>
		<div> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem itaque unde quos tenetur. Nulla
			iure ipsum, quaerat numquam veritatis doloribus molestiae molestias quod quas harum optio, dolores culpa
			odio odit!</div>
		<div> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem itaque unde quos tenetur. Nulla
			iure ipsum, quaerat numquam veritatis doloribus molestiae molestias quod quas harum optio, dolores culpa
			odio odit!</div>
		<div> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem itaque unde quos tenetur. Nulla
			iure ipsum, quaerat numquam veritatis doloribus molestiae molestias quod quas harum optio, dolores culpa
			odio odit!</div>
		<div> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem itaque unde quos tenetur. Nulla
			iure ipsum, quaerat numquam veritatis doloribus molestiae molestias quod quas harum optio, dolores culpa
			odio odit!</div>
		<div> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem itaque unde quos tenetur. Nulla
			iure ipsum, quaerat numquam veritatis doloribus molestiae molestias quod quas harum optio, dolores culpa
			odio odit!</div>
		<div> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem itaque unde quos tenetur. Nulla
			iure ipsum, quaerat numquam veritatis doloribus molestiae molestias quod quas harum optio, dolores culpa
			odio odit!</div>
		<div> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem itaque unde quos tenetur. Nulla
			iure ipsum, quaerat numquam veritatis doloribus molestiae molestias quod quas harum optio, dolores culpa
			odio odit!</div>


		<div class="card" v-pin.top.right="card2.pinned">
			<a href="#" @click="on_click_card2"> pin it</a>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quibusdam esse facilis repellat nesciunt
			enim,
		</div>


		<div> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem itaque unde quos tenetur. Nulla
			iure ipsum, quaerat numquam veritatis doloribus molestiae molestias quod quas harum optio, dolores culpa
			odio odit!</div>
		<div> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem itaque unde quos tenetur. Nulla
			iure ipsum, quaerat numquam veritatis doloribus molestiae molestias quod quas harum optio, dolores culpa
			odio odit!</div>
		<div> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem itaque unde quos tenetur. Nulla
			iure ipsum, quaerat numquam veritatis doloribus molestiae molestias quod quas harum optio, dolores culpa
			odio odit!</div>
		<div> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem itaque unde quos tenetur. Nulla
			iure ipsum, quaerat numquam veritatis doloribus molestiae molestias quod quas harum optio, dolores culpa
			odio odit!</div>
		<div> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem itaque unde quos tenetur. Nulla
			iure ipsum, quaerat numquam veritatis doloribus molestiae molestias quod quas harum optio, dolores culpa
			odio odit!</div>
		<div> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem itaque unde quos tenetur. Nulla
			iure ipsum, quaerat numquam veritatis doloribus molestiae molestias quod quas harum optio, dolores culpa
			odio odit!</div>
		<div> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem itaque unde quos tenetur. Nulla
			iure ipsum, quaerat numquam veritatis doloribus molestiae molestias quod quas harum optio, dolores culpa
			odio odit!</div>
		<div> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem itaque unde quos tenetur. Nulla
			iure ipsum, quaerat numquam veritatis doloribus molestiae molestias quod quas harum optio, dolores culpa
			odio odit!</div>
		<div> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem itaque unde quos tenetur. Nulla
			iure ipsum, quaerat numquam veritatis doloribus molestiae molestias quod quas harum optio, dolores culpa
			odio odit!</div>
		<div> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem itaque unde quos tenetur. Nulla
			iure ipsum, quaerat numquam veritatis doloribus molestiae molestias quod quas harum optio, dolores culpa
			odio odit!</div>


		<div class="card">
			> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem itaque unde quos tenetur. Nulla
			iure ipsum, quaerat numquam veritatis doloribus molestiae molestias quod quas harum optio, dolores culpa
			odio odit! ipsum dolor, sit amet consectetur adipisicing elit. Corrupti vero sed illo quae dolorum cum
			tempora exercitationem! Odio nulla accusantium maxime architecto ut autem doloremque at. Odio repellendus
			ipsa tenetur.
		</div>


	</div>




	<script src="../lib/vue.js"></script>
	<script src="js/main.js"></script>

</body>

</html>